<template>
  <div>
    <el-steps :active="activeStep" align-center>
      <el-step title="事件基本信息" description="" />
      <el-step title="事件关联信息" description="" />
      <!-- <el-step title="提交完成" description="" /> -->
    </el-steps>

    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm" status-icon>
      <!-- 事件基本信息 -->
      <div v-if="activeStep === 1">
        <el-form-item label="事件标题" prop="title">
          <el-input v-model="ruleForm.title" placeholder="请输入" :disabled="isView" />
        </el-form-item>
        <el-form-item label="申报人" prop="declarer">
          <el-select v-model="ruleForm.declarer" placeholder="请选择" style="width: 100%;" :disabled="isView" >
            <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
          </el-select>
        </el-form-item>
        <el-form-item label="发生时间" prop="occurTime">
          <el-date-picker v-model="ruleForm.occurTime" type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择" :editable="false" style="width: 100%;" :disabled="isView" />
        </el-form-item>
        <el-form-item label="发生地点" prop="occurPlace">
          <el-input v-model="ruleForm.occurPlace" placeholder="请输入" :disabled="isView" />
        </el-form-item>
        <el-form-item label="事件描述" prop="eventDetail">
          <el-input v-model="ruleForm.eventDetail" type="textarea" placeholder="请输入" :disabled="isView" />
        </el-form-item>
      </div>
      <!-- 事件关联信息 -->
      <div v-if="activeStep === 2">
        <el-form-item label="事件影响度" prop="impactLevel">
          <!-- 事件影响度  0：无 1：一般 2：严重 3：重大不能为空" -->
          <el-select v-model="ruleForm.impactLevel" placeholder="请选择" style="width: 100%;" :disabled="isView">
            <el-option label="无" value="0" />
            <el-option label="一般" value="1" />
            <el-option label="严重" value="2" />
            <el-option label="重大" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="事件优先级" prop="eventLevel">
          <!-- "事件优先级  0：紧要  1：很紧要不能为空" -->
          <el-select v-model="ruleForm.eventLevel" placeholder="请选择" style="width: 100%;" :disabled="isView">
            <el-option label="紧要" value="0" />
            <el-option label="很紧要" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="事件类型" prop="eventTypeId">
          <!-- <el-input v-model="ruleForm.eventTypeId" placeholder="请输入" /> -->
          <el-tree-select v-model="ruleForm.eventTypeId" :data="treeList" :render-after-expand="false" :props="treeProps" :node-key="'id'" style="width:100%" :disabled="isView" />
        </el-form-item>
        <el-form-item label="事件资产" prop="assersId">
          <el-select v-model="ruleForm.assersId" placeholder="请选择" style="width: 100%;" :disabled="isView">
            <el-option :label="item.accessName" :value="item.accessId" v-for="(item, index) in eventAssetsList" :key="item.accessId" @click="assersSelect(item)" />
          </el-select>
        </el-form-item>
      </div>
      <!-- 事件关联信息 -->

      <el-form-item>
        <div class="df-c  next-prev">
          <el-button @click="handler_perv" v-if="activeStep<=3&&activeStep>1">上一步</el-button>
          <el-button type="primary" @click="handler_next" v-if="activeStep<2">下一步</el-button>
          <el-button type="primary" @click="handler_enter()" v-if="activeStep===2 && !isView">提交</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import {rules} from './config'
import { eventEnterAdd ,eventEnterEdit ,eventEnterDetail ,eventcalssList ,eventEnterAssetList} from "@/api/event";
import {listUser} from '@/api/system/user'
import { useUserStore } from '@/store/modules/user';
const { proxy } = getCurrentInstance() as ComponentInternalInstance
const userStore = useUserStore();
const {userId} = userStore   
 const props = defineProps(['getList','closeDrawerFlag','rowId','isView'])
// const parentList = inject('parentList')
// const parent = getCurrentInstance().parent;
// console.log(parent);
 

const data = reactive({
    activeStep:1,
    ruleForm: {
      
    },
    treeProps:{
      label:"name",
      children:"children",
    }

})
const {activeStep,ruleForm,treeProps} = toRefs(data)
const ruleFormRef = ref()
// 下一步
const handler_next = ()=>{
  console.log(ruleForm.value);
  
  ruleFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      activeStep.value+=1
    }
  })

}
// 上一步
const handler_perv = ()=>{
    activeStep.value-=1
}
// 提交
const handler_enter = async()=>{
    console.log(ruleForm.value);
    console.log(userStore);

    // return false
    ruleFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
       const res =props?.rowId?await eventEnterEdit({...ruleForm.value}) :  await eventEnterAdd({...ruleForm.value ,registerId:userStore.userId,registerName:userStore.nickname})
       console.log(res);
       if(res.code === 200){
        proxy?.$modal.msgSuccess(res.msg);
        await props?.closeDrawerFlag()
        await  props?.getList()

       }

    }
  });


}

/* 事件资产事件 */
const assersSelect = async(item)=>{
  ruleForm.value.assersName = item.accessName
}


/**
 * 重置表单
 */
 const resetForm = () => {
  ruleFormRef.value?.resetFields();
  ruleFormRef.value?.clearValidate();

  // form.value.id = undefined;
  // form.value.status = '1';
};
const getDetail = async(id)=>{
const res = await eventEnterDetail({id})
console.log(res);
ruleForm.value = res.data
}

const userList = ref<any>([])
const getUserList = async()=>{
  const res  = await listUser()
  console.log(res);
  userList.value = res.rows
}
const treeList =ref([])
const getClassTree = async()=>{
  const res = await eventcalssList({})
  console.log(res);
  treeList.value = res.data

}

const eventAssetsList = ref()
/* 获取事件资产 */
const getEnterAssetLis = async()=>{
  const res = await eventEnterAssetList({})
  console.log(res);
  
  eventAssetsList.value = res.data
}


onMounted(async()=>{

  console.log(userId); 
  
  await getUserList()
  await getClassTree()
  await getEnterAssetLis()


})
watchEffect(async()=>{
  activeStep.value = 1
  console.log(props.rowId);
  if(props?.rowId ){
    await getDetail(props.rowId)
  }else{
    ruleForm.value = {
      declarer:userId
    }
  }

})
defineExpose({
  resetForm
})
</script>

<style scoped lang="scss">


.next-prev{
    width: 100%;
}

:deep(.el-input__wrapper){
  width: 100%;
}
</style>
